<template>
  <div class="select-address">
    <head-top head-title='选择地址' go-back="true"></head-top>
    <div class="content">
      <section class="address">
      <div class="message">
        <p class="name">
          <span>收货人：</span>
          <span>张晓宇</span>
          <span>13509952891</span>
        </p>
        <p>杭州市 下城区  绍兴路</p>
        <p>杭州市下城区绍兴路630号5栋1505室</p>
      </div>
      <div class="edit-delete">
        <div class='radio'>
          <input type='radio' id='radio1' name='radio[]' value="0">
          <label for='radio1'>设为默认地址</label>
		    </div>
        <div class="model">
          <div class="bianji">
            <span class="edit-icon"></span>  
            <span class="edit">编辑</span>
          </div>
          <div class="shanchu">
            <span class="delete-icon"></span>              
            <span class="delete">删除</span>
          </div>
        </div>
      </div>
      <div class="split"></div>
    </section>
    <section class="address">
      <div class="message">
        <p class="name">
          <span>收货人：</span>
          <span>张晓宇</span>
          <span>13509952891</span>
        </p>
        <p>杭州市 下城区  绍兴路</p>
        <p>杭州市下城区绍兴路630号5栋1505室</p>
      </div>
      <div class="edit-delete">
        <div class='radio'>
          <input type='radio' id='radio2' name='radio[]' value="0">
          <label for='radio2'>设为默认地址</label>
		    </div>
        <div class="model">
          <div class="bianji">
            <span class="edit-icon"></span>  
            <span class="edit">编辑</span>
          </div>
          <div class="shanchu">
            <span class="delete-icon"></span>              
            <span class="delete">删除</span>
          </div>
        </div>
      </div>
      <div class="split"></div>      
    </section>
    <section class="address">
      <div class="message">
        <p class="name">
          <span>收货人：</span>
          <span>张晓宇</span>
          <span>13509952891</span>
        </p>
        <p>杭州市 下城区  绍兴路</p>
        <p>杭州市下城区绍兴路630号5栋1505室</p>
      </div>
      <div class="edit-delete">
        <div class='radio'>
          <input type='radio' id='radio3' name='radio[]' value="0">
          <label for='radio3'>设为默认地址</label>
		    </div>
        <div class="model">
          <div class="bianji">
            <span class="edit-icon"></span>  
            <span class="edit">编辑</span>
          </div>
          <div class="shanchu">
            <span class="delete-icon"></span>              
            <span class="delete">删除</span>
          </div>
        </div>
      </div>
      <div class="split"></div>      
     </section>
    </div>
    <router-link to="/home/EditAddress" class="footer" tag="div">
      <span class="text">添加地址</span>
    </router-link>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
export default {
  name: 'SelectAddress',
  data() {
    return {}
  },
  components: {
    headTop
  }
}
</script>

<style lang="scss">
@import '../../common/sass/index.scss';
  .select-address{
    background-color: #fff;
    .content{
      padding-top: 40px;
      .address{
        .message{
          margin: 0 10px;        
          border-bottom: 1px solid #f1f1f1;
          padding-bottom: 14px;
        p{
          margin-top: 14px;
          color: #666;
        }
        .name{
          color: #000;
        }
        }
        .edit-delete{
          margin-top: 13px;
          padding: 0 10px;        
          display: flex;
          .radio{
            flex: 1;
          }
          .model{
            margin-top: 4px;
            flex: 1;
            text-align: right;
            .bianji,.shanchu{
              display: inline-block;
            }
            .bianji{
              margin-right: 19px;
            }
            .edit,.delete{
              vertical-align: middle;
            }
            .delete-icon,.edit-icon{
              display: inline-block;
              width: 13px;
              height: 13px;
              background-size: 13px 13px;
              background-repeat: no-repeat;
              vertical-align: middle;
              margin-right: 5px;
            }
            .delete-icon{
              @include bgimg('./images/shuanchu')

            }
            .edit-icon{
              @include bgimg('./images/bianji')
            }
          }
        }
        .split{
          height: 10px;
          background-color: #f1f1f1;
        }
      }
    }
    .footer{
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 44px;
      line-height: 44px;
      font-size: 15px;
      background-color: #0078de;
      color: #fff;
      text-align: center;
      span{
        display: inline-block;
        margin: 0 auto;
      }
    }
    .radio {
	    position: relative;
	    height: 30px;
    }
    .radio input[type='radio'] {
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 18px;
      opacity: 0;
    }

    .radio label {
      position: absolute;
      left: 30px;
      top: 0;
      height: 18px;
      line-height: 18px;
    }

    .radio label:before {
      content: '';
      position: absolute;
      left: -30px;
      top: 0;
      width: 18px;
      height: 18px;
      border: 1px solid #ddd;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .radio label:after {
      content: '';
      position: absolute;
      left: -23px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: 0;
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      background: #fff;
      transform: rotate(45deg);
      transition: all 0.3s ease;
    }

    .radio input[type='radio']:checked+label:before {
      background: #26A2FF;
      border-color: #26A2FF;
    }

    .radio input[type='radio']:checked+label:after {
      background: #26A2FF;
    }
  }
</style>
